<template>
  <div class="map">
    <!-- <div style="width:40%;">
      <div class="botton_left">
          <ul>
            <li class="one">
              <span>75岁以上</span>
            </li>
            <li class="two">
              <span>60-75岁以上</span>

            </li>
            <li class="three">
              <span>30-59岁以上</span>
            </li>
            <li class="four">
              <span>15-29岁以上</span>

            </li>
            <li class="five">
              <span>0-14岁以上</span>

            </li>
          </ul>
      </div>
    </div> -->
    <div ref="box" style="width:100%;height:300px;"></div>
  </div>
</template>

<script>
import echarts from "echarts"
import {obj as mapJson} from "./map"
export default {
  data() {
    return {

    }
  },
  methods: {
    print() {
      console.log(123)
      let myChart = echarts.init(this.$refs.box)
      echarts.registerMap("HK", mapJson)
      let option = {
        title: {
          text: "小区人口发布-小区选择",
          textStyle: {
            color: "white"
          }
          // subtext: '人口密度数据来自Wikipedia',
          // sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c} (p / km2)"
        },
        toolbox: { // 图标
          show: false,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
          }
        },
        visualMap: { // 地图的折线图
          min: 800,
          max: 50000,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"]
          },
          show: false
        },
        legend: {
          orient: "vertical", // 标题默认水平 垂直
          left: "left", // 标题定位 居中 左 右
          top: 100, // 定位 的 宽高
          textStyle: { // 字体的颜色
            color: "white"
          },
          show: true // 是否显示标题
        },
        series: [
          {
            name: "小区",
            type: "map",
            mapType: "HK", // 自定义扩展图表类型
            label: { // 展示文字
              show: true,
              textStyle: {
                color: "white"
              }
            },
            data: [
              {name: "中西区", value: 20057.34},
              {name: "东区", value: 31686.1},
              {name: "深水埗", value: 40689.64},

              {name: "沙田", value: 9172.94},
              {name: "离岛", value: 806.98}
            ],
            // 自定义名称映射
            nameMap: {
              "Central and Western": "中西区",
              "Eastern": "东区",
              "Islands": "离岛",

              "Sha Tin": "沙田",
              "Sham Shui Po": "深水埗"

            }
          }
        ]
      }
      myChart.setOption(option)
    }
  },
  mounted() {
    this.print()
  }
}
</script>

<style lang="scss">
$yellow: yellow;
  .map {
    display: flex;
    .botton_left {
      display: flex;
      justify-content: center;
      position: relative;
      top: 60px;
      ul {
        margin-left: 50px;
        padding: 0px;
        height: 260px;
        flex: 3;
        li.one,li.two,li.three,li.four,li.five {
          list-style-type: disc;
          height: 30px;
          span {
          color: $yellow;
          }
        }
        li.one {
          color: red;
        }
        li.two {
          color: salmon;
        }
        li.three {
          color: yellow;
        }
        li.four {
          color: green;
        }
        li.five {
          color: blue;
        }
      }
      .number_list {
        flex: 2;
        color:yellow;
        display:inline-block;
        .item {
          height: 30px;
        }
      }
    }
  }
</style>